<template>
    <div class="contain">
        <div class="header">
           <p>新增公告</p>
           <el-button class="link" type="primary">
                <router-link to="/informList" style="color: #fff;">返回</router-link>
           </el-button>
       </div>
       <div class="main">
            <el-form :model="information" :rules="rules" ref="information" label-width="100px" class="">
                <el-form-item label="公告标题" prop="newsTitle">
                    <el-input v-model="information.newsTitle" placeholder="请输入公告标题"></el-input>
                </el-form-item>
                <el-form-item label="公告内容" prop="newsContent">
                    <bg-editor 
                        :minHeight="300" 
                        :uploadUrl="upLoadUrl" 
                        :content="information.newsContent"
                        @editorData='editorInfo'>
                    </bg-editor>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('information')"  :loading="loading">发布</el-button>
                    <el-button @click="resetForm('information')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
       
    </div>
    

</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
import $ from 'jquery'
  export default {
    data() {
      return {
        newsId:'',
        upLoadUrl:'',
        information: {
            // upload 
            newsId:'', 
            newsTitle:'',
            newsContent:'',
            
        },
        rules: {
          newsTitle:[
            { required: true, message: '请输入公告标题', trigger: 'blur' },
          ],
          newsContent: [
            { required: true, message: '请填写公告详情', trigger: 'change' },
          ]
        },
        loading: false
      };
    },
    mounted() {
        let sessionId = sessionStorage.getItem('sessionId');
        this.upLoadUrl =CONSTANT.URL.SYSTEM.ADMINUPLOADFILE+ '?sessionId='+sessionId;
        this.newsId = this.$router.currentRoute.query.id;
        if(this.newsId){
            this.getInformDetail();
        }
    },
    components:{
        'bg-editor':()=>import('../common/bg-editor.vue')
    },
    methods: {
      getInformDetail(){
        let url = CONSTANT.URL.INFORM.FINDVOTENEWSDETAIL;
        let param = {
            newsId: this.newsId
        };
        common.requestAjax(url,param,null,(res)=>{
                let data = res.data.bussData;
                console.log('公告详情',data);
                this.information.newsTitle = data.newsTitle;
                this.information.newsContent = data.newsContent;
           }) 
      },
      editorInfo(val){
          this.information.newsContent = val;
      }, 
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true;
            let url = CONSTANT.URL.INFORM.SAVEVOTENEWS
            let data = {
                // newsId: this.newsId?this.newsId:'',
                id: this.newsId,
                newsTitle:this.information.newsTitle,
                newsContent: this.information.newsContent,
            };
            
            let param = JSON.stringify(data);
            common.requestAjax(url, param, null, res => {
                if(res.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '保存公告成功!'
                    });
                    this.loading = false;
                    this.$router.push("/informList");
                } else {
                    this.$message({
                        type: 'error',
                        message: res.msg
                    });
                    this.loading = false;
                }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    }
  }
</script>

<style lang="scss" scoped >
@import '/sys/static/bootstrap.css';     
@import '/sys/book/static/bootstrap.css'; 
    .contain {
        .header{
            height: 46px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dedede;
            p{ float: left;height: 36px;line-height: 36px;margin: 0 0 0 10px;font-size: 18px;}
            .el-button{
                float: right;
                margin-right: 5%
            }
        }
        .main {
            width:80%;
            max-width: 1500px;
            margin: 20px 0 0 40px;
            clear: both;
            .el-input,
            .el-select {
                width: 250px;
            }
            .el-form{
                .el-form-item__label{
                    width: 120px !important;
                }
            }
            .modal-body{
                .note-image-input{
                    display: block;
                }
            }
        }
    }
    
</style>
<style>
    .el-form-item__label{
        width: 120px !important;
     }
     .el-form-item__content{
         margin-left: 120px !important;
     }
</style>

